<template>
  <div>
    <Box>
      <div slot="box" style="display: flex;justify-content: space-between;">
        <div>
          <h2>{{this.getdata.control.caseName}}</h2>
          <div>
            <div>
              <span>案件编号：{{this.getdata.control.caseCode}}</span>
              &emsp;&emsp;&emsp;
              <span>案件发生开始时间：{{this.getdata.control.startDate}}</span>
              &emsp;&emsp;&emsp;
              <span>侦查终结日期：{{this.getdata.control.terminationDate}}</span>
            </div>
          </div>
        </div>
        <div style="display: flex;align-items: center;">
          <div><span>状态:</span><span :style="this.getdata.state == '已完结' ? 'color: #888888;' : 'color: blue;' ">{{this.getdata.state}}</span></div>
          <div style="margin-left: 15px"><a-button>事件分派</a-button></div>
          <div style="margin-left: 15px"><a-button>启动预案</a-button></div>
          <div style="margin-left: 15px"><a-button type="primary" @click="jieshu">任务结束</a-button></div>
          <div style="margin-left: 15px"><a-button icon="printer">打印</a-button></div>
        </div>
      </div>
    </Box>
    <Box>
      <h2 style="margin: 10px 15px" slot="title">事件概述</h2>
      <div slot="box">
        <p style="font-size: 1.1rem">{{this.getdata.control.eventOverview}}</p>
      </div>
    </Box>
    <Box>
      <h2 slot="title" style="margin: 10px 15px">命案犯罪嫌疑人</h2>
      <div slot="box">
        <div>
          <a-descriptions :title="this.getdata.control.caseName" :size="size" :column="5">
            <a-descriptions-item label="证件类型">

            </a-descriptions-item>
            <a-descriptions-item label="曾用名">

            </a-descriptions-item>
            <a-descriptions-item label="国际（地区）">

            </a-descriptions-item>
            <a-descriptions-item label="政治面貌">

            </a-descriptions-item>
            <a-descriptions-item label="职业类别">

            </a-descriptions-item>
            <a-descriptions-item label="证件号码">

            </a-descriptions-item>
            <a-descriptions-item label="性别">

            </a-descriptions-item>
            <a-descriptions-item label="籍贯">

            </a-descriptions-item>
            <a-descriptions-item label="学历">

            </a-descriptions-item>
            <a-descriptions-item label="职业">

            </a-descriptions-item>
            <a-descriptions-item label="出生日期">

            </a-descriptions-item>
            <a-descriptions-item label="民族">

            </a-descriptions-item>
            <a-descriptions-item label="婚姻状况">

            </a-descriptions-item>
            <a-descriptions-item label="宗教信仰">

            </a-descriptions-item>
            <a-descriptions-item label="服务处所">

            </a-descriptions-item>
          </a-descriptions>
        </div>
        <div>
          <a-descriptions title="" :size="size" :column="2">
            <a-descriptions-item label="户籍地">

            </a-descriptions-item>
            <a-descriptions-item label="是否为严重精神障碍患者">

            </a-descriptions-item>
            <a-descriptions-item label="户籍门(楼)详址">

            </a-descriptions-item>
            <a-descriptions-item label="是否为未成年人">

            </a-descriptions-item>
            <a-descriptions-item label="现住地">

            </a-descriptions-item>
            <a-descriptions-item label="是否为青少年">

            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </Box>
    <Box>
      <h2 slot="title" style="margin: 10px 15px">命案受害人</h2>
      <div slot="box">
        <div>
          <a-descriptions :title="this.getdata.control.caseName" :size="size" :column="5">
            <a-descriptions-item label="证件类型">

            </a-descriptions-item>
            <a-descriptions-item label="曾用名">

            </a-descriptions-item>
            <a-descriptions-item label="国际（地区）">

            </a-descriptions-item>
            <a-descriptions-item label="政治面貌">

            </a-descriptions-item>
            <a-descriptions-item label="职业类别">

            </a-descriptions-item>
            <a-descriptions-item label="证件号码">

            </a-descriptions-item>
            <a-descriptions-item label="性别">

            </a-descriptions-item>
            <a-descriptions-item label="籍贯">

            </a-descriptions-item>
            <a-descriptions-item label="学历">

            </a-descriptions-item>
            <a-descriptions-item label="职业">

            </a-descriptions-item>
            <a-descriptions-item label="出生日期">

            </a-descriptions-item>
            <a-descriptions-item label="民族">

            </a-descriptions-item>
            <a-descriptions-item label="婚姻状况">

            </a-descriptions-item>
            <a-descriptions-item label="宗教信仰">

            </a-descriptions-item>
            <a-descriptions-item label="服务处所">

            </a-descriptions-item>
          </a-descriptions>
        </div>
        <div>
          <a-descriptions title="" :size="size" :column="1">
            <a-descriptions-item label="户籍地">

            </a-descriptions-item>
            <a-descriptions-item label="户籍门(楼)详址">

            </a-descriptions-item>
            <a-descriptions-item label="现住地">

            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </Box>
    <Box>
      <div slot="box">{{this.getdata}}</div>
    </Box>
    <div>
      <a-modal v-model="visible" title="详细信息" @ok="handleOk" width="600px" centered>
        <a-textarea
          v-model="input"
          placeholder="案事件总结"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-modal>
    </div>
  </div>
</template>

<script>
import Box from '@views/xlgc/Box'
import { getMAdetailed } from '@api/xlgc/lawCase'
import { getDictItemsFromCache } from '@api/api'

export default {
  name: 'detailed',
  components: { Box },
  data(){
    return {
      input:'',
      visible:false,
      getdata:{}
    }
  },
  mounted() {
    let data = {
      "code":this.$route.query.code
    }
    this.institution(data)
  },
  methods:{
    jieshu(){
      this.visible = true
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    institution(val){
      return new Promise((resolve,reject) => {
        getMAdetailed(val).then(response => {
          this.getdata = response.result
          console.log(response)
          resolve(response)
          console.log(response)
        }).catch(error => {
          reject(error)
        })
      })

    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode,text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    }
  }
}
</script>

<style scoped>

</style>